<route>
  {
      meta: {
          enabled: false
      }
  }
  </route>

<template>
  <div>
    <page-header title="文件权限管理">
        <template #content>
            <p>文件权限管理</p>
        </template>
    </page-header>
    <page-main>
        <el-row style="margin-bottom: 10px;">
                <router-link :to="{name: 'personalExamplePowerAdd'}">
                    <el-button type="primary">新增权限组</el-button>
                </router-link>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="4">
                <el-card class="box-card">
                    <div class="clearfix" slot="header">
                        <div class="card-title">文件权限组</div>
                    </div>
                    <div class="card-d" @click="changeCard(item)" v-for="item in dataList">
                        <div>{{ item.name }}</div>
                        <div>
                            <el-button-group>
                                <el-button type="primary" plain size="small">
                                    <router-link :to="{name: 'personalExampleUser', query: {id: item.id}}">编辑成员</router-link>
                                </el-button>
                                <el-button type="primary" plain size="small">
                                    <router-link :to="{name: 'personalExampleFiled', query: {id: item.id, name: item.name}}">编辑权限</router-link>
                                </el-button>
                                <el-button type="primary" plain size="small" @click="deletePower(item)">删除</el-button>  
                            </el-button-group>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="10">
                <el-card class="box-card">
                    <div class="clearfix" slot="header">
                        <div class="card-title">文件权限-{{ dataSelect.name }}</div>
                    </div>
                    <div>
                        <el-tree
                        :data="treeListPower"
                        node-key="id"
                        :props="defaultPropsPower"
                        :load="loadNode"
                        lazy>
                        <template #default="{ node, data }">
                            <span class="custom-tree-node">
                                <span>{{ node.label }}</span>
                                <span class="update-node">
                                <span v-if="data.canRead">可读</span>
                                <span v-else>不可读</span>
                                <span v-if="data.canWrite">可写</span>
                                <span v-else>不可写</span>
                                </span>
                            </span>
                        </template>
                        </el-tree>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="10">
                <el-card class="box-card">
                    <div class="clearfix" slot="header">
                        <div class="card-title">成员-{{ dataSelect.name }}</div>
                    </div>
                    <div>
                        <el-tree
                        :data="treeList"
                        ref="treeRef"
                        node-key="userId"
                        default-expand-all
                        :props="defaultProps"></el-tree>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </page-main>
  </div>
</template>

<script setup>
import { Film, Files, Microphone, DocumentCopy, Delete, Plus, Download, Switch, Folder, FolderAdd, More } from '@element-plus/icons-vue'
import useFileStore from '@/store/modules/file'

const fileStore = useFileStore()

const dataList = ref([])

const dataSelect = ref({})

const treeList = ref([])

const treeListPower = ref([])

const defaultProps = ref({
    children: 'children',
    label: 'name',
    isLeaf: 'user'
})

const defaultPropsPower = ref({
    children: 'children',
    label: 'name',
    isLeaf: 'file'
})

onMounted(() => {
    init()
})

function init() {
    fileStore.permissonGroups().then(res => {
        dataList.value = res
        dataSelect.value = res[0]
        getList()
    }) 
}

function getList() {
    fileStore.permmissonGroupsUserTree(dataSelect.value.id).then(res => {
        treeList.value = res
    })
    fileStore.permmissonGroupsFiles(dataSelect.value.id).then(res => {
        treeListPower.value = [res]
    })
}

function loadNode(node, resolve) {
  if(node.data.id) {
    fileStore.permmissonGroupsFilesFileId(dataSelect.value.id, node.data.id).then(res => {
      return resolve(res.children)
    })    
  }
}

function changeCard(val) {
    dataSelect.value = val
    getList()
}

function deletePower(item) {
    ElMessageBox.confirm('此操作将永久删除' + item.name + '是否继续？', '提示',  {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        fileStore.permmissonGroupsDelete(item.id).then(res => {
            init()
        })
    }).catch(() => {})
}
</script>

<style scoped>
.card-d {
    margin-bottom: 10px;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid rgb(14, 165, 233);
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
}
.card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}
a {
    text-decoration: none;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node .update-node {
  display: flex;
  justify-content: space-around;
}
.custom-tree-node .update-node span {
  display: block;
  margin-left: 8px;
}
</style>
